<template>
	<view class="profit">
		<view class="profit_deta">
			<view class="content">
				<view class="cell">
					<view class="cell-detail" @click="selectDatePicker(list[0].type,0)"> 
					     <text style="color: #e93323;">开始</text><text style="margin: 0 10rpx; color: #e93323;">|</text>
						 <text space="emsp"> {{list[0].startTime}}</text> 
					</view>  
				</view>
				 <text style="color: #fff;">至</text>
				<view class="cell">
					<view class="cell-detail" @click="selectDatePicker(list[1].type,1)">
						 <text style="color: #e93323;">结束</text><text style="margin: 0 10rpx; color: #e93323;">|</text>
						 <text space="emsp">{{list[1].endTime}}</text> 
					</view>  
				</view>
				<date-time-picker ref='date-time'  :type='type' :datestring='dateString' @change='dateTimeChange'></date-time-picker>
			</view>
			<view class="profit_nav">
				<text :class="currProfitNav === 0? 'is_profit_nav' : ''" @click="changeProfitNav(0)">零售收益</text>
				<text :class="currProfitNav === 1? 'is_profit_nav' : ''" @click="changeProfitNav(1)">代理收益</text>
			</view>
		</view> 
		 
		<scroll-view scroll-y class="profit_list" @scrolltolower='scrolltolower' v-if="profitList.length > 0">
			<view class="profit_item" v-for="(item,index) in profitList" :key='index'>
				<view class="profit_item_top">
					<view>
						<image v-if="type == 0" src="../../../static/img/id.png" mode=""></image>
						<image v-else src="../../../static/img/id daili.png" mode=""></image>
						<span>{{item.order_id}}</span>
					</view>
					<span>{{item.add_time | time}}</span>
				</view>
				<view class="profit_item_con">
					本次利润: ￥{{item.profit || 0}}
				</view>
				<view class="profit_item_foo">
					<text>销售金额: {{item.total_price || 0}}</text>
					<text>成本金额: {{item.cost_price || 0}}</text>
				</view>
			</view>
		</scroll-view>
		<view v-else style="text-align: center; font-size: 36rpx;">
			暂无数据
		</view>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'

	import {
		getMyEarnings
	} from '../../../api/user.js'
	export default {
		components: {
			DateTimePicker
		},
		data() {
			return {
				// 0 是主动收益 1 是被动收益
				type: 0,
				page: 1,
				limit: 5,
				// 当前高亮
				currProfitNav: 0,
				// 收益列表
				profitList: [],
				// 没有更多了
				showProfitList: false,
				dateString: '', 
				list: [{
						type: 'date',
						startTime: '开始时间' 
					},
					{
						type: 'date',
						endTime: '结束时间' ,
						}
				]
			}
		},
		onShow() {
			this.getMyEarnings()
		},
		methods: {
			getMyEarnings(val) {
				let that = this
				let data = {
					type: that.type,
					page: that.page,
					limit: that.limit,
					start_time: that.list[0].startTime,
					end_time: that.list[1].endTime
				}
				
				getMyEarnings(data).then(res => {
					uni.showLoading()
					if (res.data.status == 200) {
						uni.hideLoading()
						let {
							data
						} = res.data.result.data
						that.profitList.push(...data)
						that.showProfitList = data.length < that.limit
					}
				})
			},
			scrolltolower() {
				let that = this
				if (!that.showProfitList) {
					that.page += 1
					that.getMyEarnings()
				}
			},
			changeProfitNav(index) {
				this.currProfitNav = index
				this.type = index
				this.page = 1
				this.profitList = []
				this.getMyEarnings()
			},
			selectDatePicker(type, index) { 
				this.type = type;
				this.index = index;
				this.$refs['date-time'].show();
			}, 
			dateTimeChange(value) {   
				this.index == 1? this.list[1].endTime =value :  this.list[0].startTime =value  
				if(this.list[0].startTime && this.list[1].endTime){
					this.getMyEarnings()
				}  
			}
		},
		filters: {
			time(time) {
				return time.split('')[0]
			}
		}
	}
</script>

<style lang="less" scoped>
	.profit {
		.profit_nav {
			display: flex;
			justify-content: space-around; 
			height: 80rpx;
			font-size: 32rpx;
			line-height: 80rpx;
			background-color: #fff;
		}

		.is_profit_nav {
			color: #ff200b;
			border-bottom: 2rpx solid #ff200b;
		}

		.profit_deta { 
			margin-bottom: 20rpx;
			line-height: 80rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #eee;
			.content{ 
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				background-color: #e93323;
				.cell{
					padding: 0 20rpx;
					width: 300rpx;
					height: 70rpx;
					display: flex; 
					color: #949494;
					line-height: 70rpx;
					background-color: #fff; 
					border-radius: 40rpx; 
				} 
			}
		}

		.profit_list {
			padding-top: 20rpx;
			background-color: #fff;
			height: calc(100vh - 160rpx);

			.profit_item {
				padding: 20rpx;
				margin: 0 20rpx;
				margin-bottom: 20rpx;
				height: 300rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 10rpx 20rpx 0rpx #999;

				.profit_item_top {
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					line-height: 70rpx;

					image {
						margin-right: 10rpx;
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
					}
				}

				.profit_item_con {
					display: block;
					font-size: 36rpx;
					margin: 30rpx 0 30rpx 40rpx;
				}

				.profit_item_foo {
					display: flex;
					justify-content: space-between;
					margin-left: 40rpx;
					color: #999;
					font-size: 30rpx;
				}
			}
		}
	}
</style>
